import styled from "@emotion/styled"
import { useInViewport, useThrottleFn } from "ahooks"
import { useEffect, useRef } from "react"

const Container = styled.div`
    line-height: 24rem;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20rem;
    padding-bottom: 20rem;
`

const Text = styled.span`
    font-family: Gilroy;
    font-weight: 500;
    font-size: 12rem;
    line-height: 16rem;
    width: 75rem;
    height: 16rem;
    text-align: center;
    color: #69728c;
`
const LineL = styled.div`
    flex: 1;
    height: 1rem;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.25) 100%);
`
const LineR = styled.div`
    flex: 1;
    height: 1rem;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.25) 0%, rgba(0, 0, 0, 0.05) 100%);
`

export function LoadSummary({
    count = 0,
    isLoading = false,
    onLoadMore,
}: {
    count: number
    isLoading?: boolean
    onLoadMore?: () => void
}) {
    const ref = useRef<HTMLDivElement | null>(null)
    const [inViewport] = useInViewport(ref)

    const { run: throttledLoadMore } = useThrottleFn(
        () => {
            if (!isLoading) onLoadMore?.()
        },
        { wait: 800 }, // 800ms 节流间隔，可根据情况调整
    )

    useEffect(() => {
        if (inViewport) {
            throttledLoadMore()
        }
    }, [inViewport, throttledLoadMore])

    return (
        <Container ref={ref}>
            <LineL />
            <Text>{isLoading ? "Loading..." : `All ${count} data`}</Text>
            <LineR />
        </Container>
    )
}
